<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: YuanYu
 * @LastEditTime: 2021-10-19 18:51:01
-->
<template>
  <!-- 这里使用ref 作用类似于id -->
  <!-- 2.定义容器 -->
  <div id="botton4" style="height: 150px"></div>
</template>

<script>
// 在g2plot中 引入Column组件
import { Pie } from "@antv/g2plot";
// 使用vue3.0的语法
// 1.引入g2plot 已经在package.json中进行引用

export default {
  data() {
    return {};
  },
  methods: {
    initChart() {
      const data = [
        { type: "婴儿", value: 6 },
        { type: "幼儿", value: 15 },
        { type: "儿童", value: 19 },
        { type: "少年", value: 17 },
        { type: "青年", value: 8 },
        { type: "中年", value: 15 },
        { type: "老年", value: 20 },
      ];

      const piePlot = new Pie("botton4", {
        appendPadding: 10,
        data,
        angleField: "value",
        colorField: "type",
        radius: 0.75,
        label: {
          type: "spider",
          labelHeight: 28,
          content: "{name}\n{percentage}",
        },
        interactions: [
          { type: "element-selected" },
          { type: "element-active" },
        ],
      });
      piePlot.render();
    },
  },
  mounted() {
    this.initChart();
  }
};
</script>


<style scoped>
</style>